<!-- 加载模板 -->
{% extends '1.html' %}
{% block content %}
    <div class="container">
        <!-- 今日必抢 - 销量最高的前10个产品 -->
        <div class="section">
            <h2 class="section-title">今日必抢 <span class="badge">销量TOP10</span></h2>
            <div class="product-grid">
                {% for product in sold_max %}
                    <a href="{% url 'commodity:details' pk=product.id %}">
                        <div class="product-card">
                            <img src="{{ product.img.url }}" alt="{{ product.name }}" class="product-image">
                                <div class="product-info">
                                <div class="product-name">{{ product.name }}</div>
                                <div class="product-price">¥{{ product.price }}</div>
                                <div class="product-sold">已售: {{ product.sold }}件</div>
                        </div>
                        </div>
                    </a>
                {% endfor %}
            </div>
        </div>

        <!-- 电子产品销量前5 -->
        <div class="section">
            <h2 class="section-title">电子产品 <span class="badge">销量TOP5</span></h2>
            <div class="product-grid">
                {% for product in dianz_5 %}
                 <a href="{% url 'commodity:details' pk=product.id %}">
                <div class="product-card">
                    <img src="{{ product.img.url }}" alt="{{ product.name }}" class="product-image">
                    <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-price">¥{{ product.price }}</div>
                        <div class="product-sold">已售: {{ product.sold }}件</div>
                    </div>
                </div>
                 </a>
                {% endfor %}
            </div>
        </div>

        <!-- 超市零售销量前5 -->
        <div class="section">
            <h2 class="section-title">超市零售 <span class="badge">销量TOP5</span></h2>
            <div class="product-grid">
                {% for product in ls_5 %}
                 <a href="{% url 'commodity:details' pk=product.id %}">
                <div class="product-card">
                    <img src="{{ product.img.url }}" alt="{{ product.name }}" class="product-image">
                    <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-price">¥{{ product.price }}</div>
                        <div class="product-sold">已售: {{ product.sold }}件</div>
                    </div>
                </div>
                 </a>
                {% endfor %}
            </div>
        </div>

        <!-- 母婴产品销量前5 -->
        <div class="section">
            <h2 class="section-title">母婴用品 <span class="badge">销量TOP5</span></h2>
            <div class="product-grid">
                {% for product in mu_5 %}
                 <a href="{% url 'commodity:details' pk=product.id %}">
                <div class="product-card">
                    <img src="{{ product.img.url }}" alt="{{ product.name }}" class="product-image">
                    <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-price">¥{{ product.price }}</div>
                        <div class="product-sold">已售: {{ product.sold }}件</div>
                    </div>
                </div>
                 </a>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock content %}